<template>
   
  <div>
    <!--     所有数据 -->
    <Process
      :strokeWidth="strokeWidth"
      :eccolor="eccolor"
      :ectitle="ectitle"
      :ecdata="ecdata"
    />

    <Alltable
      :wxtitle="wxtitle"
      :wxcons="wxcons"
      :wxtableData="wxtableData"
      :wxdisplay="wxdisplay"
    />
    <Alltable
      :wxtitle="wxtitle1"
      :wxcons="wxcons1"
      :wxtableData="wxtableData1"
      :wxdisplay="wxdisplay1"
    />
    <Allpk :qydata="qydata" />
    <Ecchartskong
      :strokeWidth="strokeWidth1"
      :eccolor="eccolor1"
      :ectitle="ectitle1"
      :ecdata="ecdata1"
    />
  </div>
</template>

<script  lang="ts">
import Process from "./ecbing/src/ecbing.vue";
import Alltable from "./allform/src/allform.vue";
import Allpk from "./allpk/src/allpk.vue";
import Ecchartskong from "./ecchartskong/ecchartskong.vue";
import { ref } from "vue";

export default {
  components: {
    Process,
    Alltable,
    Allpk,
    Ecchartskong,
  },
  setup() {
    const strokeWidth = ref("");
    const ecdata = ref("");
    const ectitle = ref("");
    const eccolor = ref("");
    const wxtitle = ref("");
    const wxcons = ref("");
    const wxtableData = ref("");
    const wxdisplay = ref("");
    const wxtitle1 = ref("");
    const wxcons1 = ref("");
    const wxtableData1 = ref("");
    const wxdisplay1 = ref("");
    const qydata = ref("");
    const strokeWidth1 = ref("");
    const ecdata1 = ref("");
    const ectitle1 = ref("");
    const eccolor1 = ref("");
    return {
      // 饼图名字
      strokeWidth: "成交总业绩占比",
      // 饼图名字左右
      ectitle: "left",
      // 饼图颜色
      eccolor: ["#5B8FF9", "#5AD8A6", "#5D7092"],
      // 饼图数据
      ecdata: [
        { value: 180, name: "签约业绩占比" },
        { value: 735, name: "返单业绩占比" },
        { value: 380, name: "认购业绩占比" },
      ],

      // 表单组件
      // 表单名字
      wxtitle: "部门排名",
      // 下拉框是否展示
      wxdisplay: "block",
      // 表单下拉框
      wxcons: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      // 表格数据
      wxtableData: [
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
      ],
      // 第二个表单
      wxtitle1: "大区排名",
      // 下拉框是否展示
      wxdisplay1: "none",
      // 表单下拉框
      wxcons1: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      // 表格数据
      wxtableData1: [
        {
          name: "王鑫",
          namecity: "京东-燕郊区域阿德撒旦阿斯顿萨达",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
        {
          name: "王鑫",
          namecity: "京东-燕郊区",
          sets: "3",
          achievement: "100万",
          average_performance: "9万",
          net_performance: "6万",
          commission: "2万",
          oldandnew: "6万",
        },
      ],

      // 签约数字
      qydata: {
        pktitle: "签约业绩",
        pknexttitle: "平均业绩",
        money: "8,823,454",
        oldmoney: "2.32",
        newmoney: "2.32",
        nextmoney: "8,823,454",
        nextoldmoney: "2.32",
        nextnewmoney: "2.32",
      },

      // 饼图名字
      strokeWidth1: "成交总业绩占比",
      // 饼图名字左右
      ectitle1: "left",
      // 饼图颜色
      eccolor1: ["#5B8FF9", "#5AD8A6", "#5D7092"],
      // 饼图数据
      ecdata1: [
        { value: 180, name: "签约业绩占比" },
        { value: 735, name: "返单业绩占比" },
        { value: 380, name: "认购业绩占比" },
      ],
    };
  },
};
</script>

<style scoped>
body {
  background-color: #cacaca;
}
</style>